<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="query">
			<el-form
				ref="form"
				:inline="true"
				:model="queryData"
				label-width="100px"
			>
				<el-form-item :label="`${$t('common.belong_merchant')}:`">
					<merchant-select
						v-model="queryData.merchantId"
						v-symbols
					></merchant-select>
				</el-form-item>
				<el-form-item :label="`${$t('member.login_time')}:`">
					<el-date-picker
						v-model="formTime.time"
						size="medium"
						:picker-options="pickerShortcut2"
						format="yyyy-MM-dd HH:mm:ss"
						type="datetimerange"
						range-separator="-"
						:start-placeholder="$t('common.start_date')"
						:end-placeholder="$t('common.end_date')"
						align="right"
						:default-time="defaultTime"
						style="width: 452px"
						:clearable="false"
						@focus="reloadTime"
					></el-date-picker>
				</el-form-item>
				<el-form-item :label="`${$t('common.member_number')}:`">
					<el-input
						v-model="queryData.userName"
						v-symbols
						clearable
						size="medium"
						maxlength="11"
						:placeholder="$t('common.please_enter')"
					></el-input>
				</el-form-item>
				<el-form-item :label="`${$t('common.number_type')}:`">
					<el-select
						v-model="queryData.accountType"
						collapse-tags
						:placeholder="$t('common.select_all')"
						:popper-append-to-body="false"
						clearable
					>
						<el-option
							v-for="item in accountType"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>

				<el-form-item :label="`${$t('member.member_login_status')}:`">
					<el-select
						v-model="queryData.loginStatus"
						clearable
						:placeholder="$t('common.select_all')"
						:popper-append-to-body="false"
					>
						<el-option
							v-for="item in loginStatusType"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item :label="`${$t('member.device_type')}:`">
					<el-select
						v-model="queryData.deviceType"
						:popper-append-to-body="false"
						:placeholder="$t('common.select_all')"
						collapse-tags
						clearable
						multiple
					>
						<el-option
							v-for="item in loginDeviceType"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-col :span="8">
						<el-select
							v-model="accountFlag"
							:placeholder="$t('common.please_choose')"
						>
							<el-option
								:label="`${$t('member.login_ip_member')}`"
								value="loginIp"
							/>
							<el-option
								:label="`${$t('member.ip_attribution')}`"
								value="ipAttribution"
							/>
							<el-option
								:label="`${$t('member.device_no_member')}`"
								value="deviceNo"
							/>
						</el-select>
					</el-col>
					<el-col :span="16">
						<el-input
							v-if="accountFlag === 'loginIp'"
							v-model.trim="queryData.loginIp"
							clearable
							:placeholder="$t('common.please_enter')"
						></el-input>
						<el-input
							v-if="accountFlag === 'ipAttribution'"
							v-model="queryData.ipAttribution"
							clearable
							:placeholder="$t('common.please_enter')"
						></el-input>
						<el-input
							v-if="accountFlag === 'deviceNo'"
							v-model.trim="queryData.deviceNo"
							clearable
							:placeholder="$t('common.please_enter')"
						></el-input>
					</el-col>
				</el-form-item>
				<el-form-item style="margin-left: 10px">
					<el-button
						type="primary"
						icon="el-icon-search"
						size="medium"
						:loading="loading"
						:disabled="loading"
						@click="search"
					>
						{{ $t('common.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						size="medium"
						:disabled="loading"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
				</el-form-item>

				<p class="login2">
					<span class="fail">
						{{ $t('member.count') }}：
						<span>
							{{ summary.count }}{{ $t('member.second') }}
						</span>
					</span>
					{{ $t('member.success_count') }}：
					<span class="success">
						{{ summary.successCount }}{{ $t('member.second') }}
					</span>
					<span class="fail">
						{{ $t('member.fail_count') }}：
						<span class="danger">
							{{ summary.failCount }}{{ $t('member.second') }}
						</span>
					</span>
				</p>
			</el-form>
		</template>
		<template slot="content">
			<el-table
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				border
				size="mini"
				class="small-size-table"
				:data="dataList"
				style="width: 100%"
				:max-height="tableHeight"
				:header-cell-style="getRowClass"
				@sort-change="changeTableSort"
				highlight-current-row
			>
				<el-table-column
					prop="loginTime"
					align="center"
					:label="`${$t('member.login_time')}`"
					width="200"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.loginTime || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="loginStatus"
					align="center"
					:label="`${$t('member.member_login_status')}`"
					width="80"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span
							:class="
								scope.row.loginStatus === '1'
									? 'success'
									: 'danger'
							"
						>
							{{
								typeFilter(
									scope.row.loginStatus,
									'loginStatusType'
								)
							}}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="userName"
					align="center"
					:label="`${$t('common.member_number')}`"
					width="120"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.userName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="merchantId"
					align="center"
					:label="`${$t('common.belong_merchant')}`"
					width="150"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ merchantFilter(scope.row.merchantId + '') }}
					</template>
				</el-table-column>
				<el-table-column
					prop="accountType"
					align="center"
					:label="`${$t('common.number_type')}`"
					width="80"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ typeFilter(scope.row.accountType, 'accountType') }}
					</template>
				</el-table-column>
				<el-table-column
					prop="loginIp"
					align="center"
					:label="$t('member.login_ip_member')"
					width="130"
					show-overflow-tooltip
				>
					<template slot="header">
						{{ $t('member.login_ip_member') }}
						<br />
						{{ $t('common.risk_control_level') }}
					</template>
					<template slot-scope="scope">
						{{ scope.row.loginIp || '-' }}
						<br />
						<span class="redColor">
							{{ $t('common.risk_control_level') }}：{{
								scope.row.ipControlName || '-'
							}}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="loginIPCount"
					align="center"
					label="同IP下账号数量"
					width="120"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span
							class="text-link"
							@click="handleOpenIpDialog(scope.row)"
						>
							{{ scope.row.loginIPCount || '-' }}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="ipAttribution"
					align="center"
					:label="`${$t('member.ip_attribution')}`"
					width="120"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.ipAttribution || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="topProxyName"
					align="center"
					label="所属总代"
					width="120"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.topProxyName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="parentProxyName"
					align="center"
					label="上级代理"
					width="120"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.parentProxyName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="deviceType"
					align="center"
					:label="`${$t('member.device_type')}`"
					width="120"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{
							typeFilter(scope.row.deviceType, 'loginDeviceType')
						}}
					</template>
				</el-table-column>
				<el-table-column
					prop="deviceNo"
					align="center"
					width="200"
					show-overflow-tooltip
				>
					<template slot="header">
						{{ $t('member.device_no_member') }}
						<br />
						{{ $t('common.risk_control_level') }}
					</template>
					<template slot-scope="scope">
						{{ scope.row.deviceNo || '-' }}
						<br />
						<span class="redColor">
							{{ $t('common.risk_control_level') }}：{{
								scope.row.deviceNoControlName || '-'
							}}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="deviceNoCount"
					align="center"
					label="同设备号下账号数量"
					width="130"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						<span
							class="text-link"
							@click="handleOpenTerminalDialog(scope.row)"
						>
							{{ scope.row.deviceNoCount || '-' }}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="loginReference"
					align="center"
					:label="`${$t('member.login_reference')}`"
					width="200"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.loginReference || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="browseContent"
					align="center"
					:label="`${$t('member.browse_content')}`"
					width="280"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.browseContent || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="location"
					align="center"
					:label="`${$t('common.gps_location_info')}`"
					width="150"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.location || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					prop="loginError"
					align="center"
					:label="`${$t('common.remark')}`"
					width="100"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.loginError || '-' }}
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination
				v-show="!!total"
				:current-page.sync="pageNum"
				class="pageValue"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size="pageSize"
				:page-sizes="pageSizes"
				:total="total"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</template>
		<IpDialog v-model="dialogIpVisible" :searchData="searchData" />
		<TerminalDialog
			v-model="dialogTerminalVisible"
			:searchData="searchData"
		/>
	</main-content>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
import { routerNames } from '@/utils/consts'
import MainContent from '@/components/MainContent/index.vue'
import IpDialog from './components/IpDialog'
import TerminalDialog from './components/TerminalDialog'
const end = () =>
	dayjs()
		.endOf('day')
		.valueOf()
const start = () =>
	dayjs()
		.startOf('day')
		.valueOf()

export default {
	name: routerNames.memberLogin,
	components: {
		MainContent,
		IpDialog,
		TerminalDialog
	},
	mixins: [list],
	data() {
		this.search = this.throttle(this.search, 1000)
		this.reset = this.throttle(this.reset, 1000)
		return {
			dialogIpVisible: false,
			dialogTerminalVisible: false,
			accountFlag: 'loginIp',
			tableHeight: 480,
			otherDependenComponents: [],
			queryData: {
				siteType: 'loginIp',
				userName: undefined,
				loginStatus: undefined,
				loginIp: undefined,
				deviceNo: undefined
			},
			now: dayjs(new Date()).format('YYYY-MM-DD HH:mm:ss'),
			summary: {
				count: 0,
				failCount: 0,
				successCount: 0
			},
			formTime: {
				time: [start(), end()]
			},
			dataList: [],
			searchLoading: false,
			searchData: {}
		}
	},
	computed: {
		accountType() {
			return this.globalDics.accountType || []
		},
		loginStatusType() {
			return this.globalDics.loginStatusType || []
		},
		loginDeviceType() {
			return this.globalDics.loginDeviceType || []
		},
		appIdArr() {
			return this.globalDics.appId || []
		}
	},
	watch: {
		accountFlag: {
			handler(newVal, oldVal) {
				this.$set(this.queryData, newVal, '')
				this.$set(this.queryData, oldVal, '')
			}
		}
	},
	mounted() {},
	methods: {
		handleOpenTerminalDialog(val) {
			delete this.searchData.loginIp
			this.searchData.deviceNo = val.deviceNo
			this.dialogTerminalVisible = true
		},
		handleOpenIpDialog(val) {
			delete this.searchData.deviceNo
			this.searchData.loginIp = val.loginIp
			this.searchData.ipAttribution = val.ipAttribution
			this.dialogIpVisible = true
		},
		reloadTime() {
			this.registerTime = [start(), end()]
		},
		loadData() {
			const [startTime, endTime] = this.formTime.time || []
			const params = {
				...this.queryData,
				loginStartTime: startTime
					? dayjs(startTime).format('YYYY-MM-DD HH:mm:ss')
					: undefined,
				loginEndTime: endTime
					? dayjs(endTime).format('YYYY-MM-DD HH:mm:ss')
					: undefined,
				...this.getParams(params)
			}
			if (!params.loginStartTime || !params.loginEndTime) {
				this.$message({
					message: this.$t('member.required_time'),
					type: 'error'
				})
				return
			}
			params[this.siteType] = params.appType
			delete params.appType
			this.searchData = params
			this.loading = true
			this.$api
				.memberLoginLog(params)
				.then((res) => {
					this.loading = false
					const { code, msg } = res
					if (res && code === 200) {
						this.now = dayjs(new Date()).format(
							'YYYY-MM-DD HH:mm:ss'
						)
						const data = res.data
						this.dataList =
							(data &&
								data.record &&
								data.record.length &&
								Object.freeze(data.record)) ||
							[]
						this.total = (data && data.totalRecord) || 0
						this.summary = data?.summary || {
							count: 0,
							failCount: 0,
							successCount: 0
						}
					} else {
						this.$message({
							message: res && msg,
							type: 'error'
						})
					}
				})
				.catch(() => {
					this.loading = false
				})
		},
		reset() {
			this.accountFlag = 'loginIp'
			this.queryData = {
				userName: undefined,
				loginStatus: undefined,
				loginIp: undefined,
				ipAttribution: undefined,
				deviceNo: undefined
			}
			this.pageNum = 1
			this.accountType1 = []
			this.deviceType1 = []
			this.formTime.time = [start(), end()]
			this.loadData()
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
}
.login1 {
	margin-top: 0;
	span {
		margin-left: 50px;
	}
}
.login2 {
	padding-bottom: 15px;
	.fail {
		margin-left: 50px;
		margin-right: 50px;
	}
}
</style>
